<template>
  <div class="home-middle" :style="{backgroundImage: 'url('+ img +')'}">
    <div class="activity-reminder">
      <div class="processing" v-if="processingShow">
        <p class="processing-text">活动进行中</p>
      </div>
      <div class="end" v-else-if="endShow">
        <p class="end-text">活动已结束</p>
      </div>
    </div>
    <div class="count-down" >
      <span class="count-down-text">距离结束剩：</span>
      <yd-countdown :time="this.times" timetype="timestamp" v-show="startOrStop" data-v='1'>
        <span :class="dayClass">{%d}</span><i :class="textClass">天</i>
        <span :class="timeClass">{%h}</span><i :class="textClass">时</i>
        <span :class="minuteClass">{%m}</span><i :class="textClass">分</i>
        <span :class="secondClass">{%s}</span><i :class="textClass">秒</i>
      </yd-countdown>
      <yd-countdown :time="23564612226565" timetype="timestamp" done-text="活动已结束" v-show="!startOrStop" data-v='2'>
        <span :class="dayClass">00</span><i :class="textClass">天</i>
        <span :class="timeClass">00</span><i :class="textClass">时</i>
        <span :class="minuteClass">00</span><i :class="textClass">分</i>
        <span :class="secondClass">00</span><i :class="textClass">秒</i>
      </yd-countdown>
    </div>
    <!-- <div class="count-down"  data-v="2">
      <span class="count-down-text">距离结束剩：</span>
      <yd-countdown :time="23564612452035" done-text="活动已结束">
        <span :class="dayClass">00</span><i :class="textClass">天</i>
        <span :class="timeClass">00</span><i :class="textClass">时</i>
        <span :class="minuteClass">00</span><i :class="textClass">分</i>
        <span :class="secondClass">00</span><i :class="textClass">秒</i>
      </yd-countdown>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'Time',
  props: {
    processingShow: {
      type: Boolean,
      default: false
    },
    endShow: {
      type: Boolean,
      default: false
    },
    timestamp: {
      type: Number
    },
    image: {
      type: String
    }
  },
  data () {
    return {
      img: '',
      // :style="{background: 'url('+ img +')'}"
      times: '',
      dayClass: {
        day: true
      },
      timeClass: {
        time: true
      },
      minuteClass: {
        minute: true
      },
      secondClass: {
        second: true
      },
      textClass: {
        timeText: true
      },
      backgroundStyle: {
        background: 'url(`${this.img}`) no-repeat',
        backgroundSize: 'cover'
      },
      startOrStop: true
    }
  },
  // created () {
  //   this.$nextTick( () => {
  //     this.times = this.timestamp
  //     this.img = this.image
  //     let currentTime = new Date().getTime() / 1000
  //     if (currentTime > this.times) {
  //       this.startOrStop = false
  //     }
  //   })
  // },
  watch: {
    timestamp () {
      this.times = this.timestamp
      let currentTime = new Date().getTime() / 1000
      if (currentTime > this.times) {
        this.startOrStop = false
      }
    },
    image () {
      this.img = this.image
    }
  }
}
</script>

<style lang="stylus" scoped>
.home-middle
  width 623px
  height 350px
  margin 0 auto
  position relative
  background-size cover
  background-repeat no-repeat
  .activity-reminder
    position absolute
    top -47px
    right 20px
    width 200px
    height 121px
    .processing
      background url("../assets/img/processing-background-img.png") no-repeat
      background-size cover
      height 100%
      display flex
      justify-content center
      padding-top 40px
      .processing-text
        font-size 28px; /*px*/
        color #fff
    .end
      background url("../assets/img/end-background-img.png") no-repeat
      background-size cover
      height 100%
      padding-top 40px
      text-align center
      .end-text
        color #ffffff
        font-size 28px; /*px*/
  .count-down
    position absolute
    bottom 0
    height 86px
    width 100%
    background-color rgba(0, 0, 0, 0.6)
    display flex
    justify-content center
    align-items center
    color #fff
    font-size 30px
    .count-down-text
      font-size 23px; /*px*/
      color #fff
    .day
      background url(../assets/img/day.png) no-repeat
      background-size cover
      color #f15f8b
      font-size 30px
      width 100px
      height 50px
      text-align center
      line-height 52px
      display inline-block
    .time, .minute, .second
      background url(../assets/img/time.png) no-repeat
      background-size cover
      color #f15f8b
      font-size 30px
      width 70px
      height 50px
      text-align center
      line-height 52px
      display inline-block
    .timeText
      color #fff
      font-size 24px; /*px*/
      margin 0 4px
</style>
